import { fittingString } from "../../utils";
export default G6 => {
  // 中心节点，带动画
  G6.registerNode('center-node', {
    /**
     * 绘制后的附加操作，默认没有任何操作
     * @param  {Object} cfg 节点的配置项
     * @param  {G.Group} group 图形分组，节点中的图形对象的容器
     */
    afterDraw(cfg, group) {
      const { size, icon} = cfg;
      const r = size / 2;
      const y = 0;
      const back1 = group.addShape('circle', {
        zIndex: -3,
        attrs: {
          x: 0,
          y,
          r,
          fill: cfg.color,
          opacity: 0.6,
        },
        draggable: true,
        name: 'back1-shape',
      });
      const back2 = group.addShape('circle', {
        zIndex: -2,
        attrs: {
          x: 0,
          y,
          r,
          fill: cfg.color,
          opacity: 0.6,
        },
        draggable: true,
        name: 'back2-shape',
      });
      const back3 = group.addShape('circle', {
        zIndex: -1,
        attrs: {
          x: 0,
          y,
          r,
          fill: cfg.color,
          opacity: 0.6,
        },
        draggable: true,
        name: 'back3-shape',
      });
      group.addShape('text', {
          zIndex: 0,
          attrs: {
              x: 0,
              y,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: icon,
              fontSize: 15,
              fill: '#fff',
              cursor: 'pointer',
          },
          draggable: true,
          // must be assigned in G6 3.3 and later versions. it can be any value you want
          name: 'text-shape',
      });
      group.sort(); // Sort according to the zIndex
      back1.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 0,
          repeat: true, // repeat
        },
      ); // no delay
      back2.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 1000,
          repeat: true, // repeat
        },
      ); // 1s delay
      back3.animate(
        {
          // Magnifying and disappearing
          r: r + 10,
          opacity: 0.1,
        },
        {
          duration: 3000,
          easing: 'easeCubic',
          delay: 2000,
          repeat: true, // repeat
        },
      ); // 3s delay
    },
  },
  'circle',
  );

  // 叶子节点，带图标
  G6.registerNode('leaf-node', {
    /**
     * 绘制节点，包含文本
     * @param  {Object} cfg 节点的配置项
     * @param  {G.Group} group 图形分组，节点中的图形对象的容器
     * @return {G.Shape} 绘制的图形，通过 node.get('keyShape') 可以获取到
     */
    draw(cfg, group) {
        const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle, icon } = cfg;

        if (backgroundStyle) {
            group.addShape('circle', {
                attrs: {
                    x: 0,
                    y: 0,
                    r: cfg.size,
                    ...backgroundStyle,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2,
                    shadowColor: '#40a9ff',
                    shadowBlur: 10,
                    opacity: 0.8,
                },
                // must be assigned in G6 3.3 and later versions. it can be any value you want
                name: 'circle-shape',
            });
        }

        const keyShape = group.addShape('text', {
            attrs: {
                x: 0,
                y: 0,
                fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
                textAlign: 'center',
                textBaseline: 'middle',
                text: icon,
                fontSize: cfg.size,
                ...style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape2',
        });
        const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

        group.addShape('text', {
            attrs: {
                x: 0,
                y: labelY,
                textAlign: 'center',
                text: cfg.label,
                ...labelStyle.style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape3',
        });
        return keyShape;
    },
  });

  // 叶子节点，带图标/标题/描述
  G6.registerNode('card-node', {
    draw(cfg, group) {
      const {id, icon, cm_name, moduleDefinitions, color} = cfg;
      const r = 2;
      const shape = group.addShape('rect', {
        attrs: {
          x: 0,
          y: 0,
          width: 120,
          height: 42,
          stroke: color,
          fill: '#ffffff',
          radius: r,
        },
        name: 'main-box',
        draggable: true,
      });

      group.addShape('rect', {
        attrs: {
          x: 0,
          y: 0,
          width: 120,
          height: 20,
          fill: color,
          radius: [r, r, 0, 0],
        },
        name: 'title-box',
        draggable: true,
      });

      group.addShape('text', {//左侧图标
        attrs: {
          x: 4,
          y: 16,
          height: 16,
          width: 16,
          fontFamily: 'iconfont',
          text: icon,
          fill: '#fff',
          fontSize: 14,
          cursor: 'pointer',
        },
        draggable: true,
        name: 'node-icon'
      });

      group.addShape('text', {// 模型名称
        attrs: {
          textBaseline: 'top',
          x: 24,
          y: 2,
          lineHeight: 20,
          text: fittingString(moduleDefinitions?.moduleName, 118),
          fill: '#fff',
          fontSize: 14,
          cursor: 'pointer',
        },
        draggable: true,
        name: 'title',
      });

      group.addShape('text', {
          attrs: {
            textBaseline: 'top',
            y: 23,
            x: 4,
            lineHeight: 20,
            text: fittingString(cm_name, 118),
            fill: '#666',
            fontSize: 14,
            cursor: 'pointer',
          },
          draggable: true,
          name: 'content',
      });
      group.sort();
      return shape;
    },
    setState (name, value, node) {
      const group = node.getContainer();
      const rect = group.getFirst();
      if (name === 'active' || name === 'selected') {
        rect.attr({
          lineWidth: value ? 1.5 : 1,
        });
      }
    },
  },
  'single-node',
  );
};
